<template>
  <!-- 阻止页面滚动穿透属性 -->
  <page-meta :page-style="'overflow:' + (globalScrollPage ? 'hidden' : 'visible')"></page-meta>
  <!-- 页元素 -->
  <view>
    <view class="contaier-box">
      <home
        ref="home"
        v-if="conponentName == 'home'"
      />
      <run-lottery v-if="conponentName == 'runLottery'" />
      <prize
        ref="prize"
        v-if="conponentName == 'prize'"
      />
      <mine v-if="conponentName == 'mine'" />
    </view>
    <!-- 回顶 -->
    <u-back-top
      :scroll-top="scrollTop"
      v-if="conponentName == 'home'"
      :bottom="200"
      top="200"
    ></u-back-top>
    <!-- 底部导航 -->
    <tab-bar
      @changeCurrentPage="changeCurrentPage"
      :indexPageCurrent="indexPageCurrent"
    />
  </view>
</template>

<script>
import home from '@/pages/home/home'
import runLottery from '@/pages/runLottery/index'
import mine from '@/pages/mine/index'
// import { mapMutations, mapState } from 'vuex'
import prize from '@/pages/prize/index'
export default {
  components: {
    home,
    runLottery,
    mine,
    prize
  },
  data() {
    return {
      conponentName: 'home',
      indexPageCurrent: 0,
      scrollTop: 0,
      showNewUserDialog: false
    }
  },
  computed: {
    // 控制是否滚动穿透属性
    // ...mapState('steryBox/app', ['globalScrollPage'])
  },
  // 页面滚动，回顶操作
  onPageScroll(e) {},
  // 页面触底，加载更多
  onReachBottom() {},
  async onLoad(options) {},
  methods: {
    // ...mapMutations('steryBox/app', ['SET_SCROLL_TOP', 'CHANGE_OPERATION_AND_PAGE_RECORD']),
    changeCurrentPage(e) {
      this.conponentName = e
      if (e == 'home') {
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
